import { Box, TableCell, TableRow } from '@mui/material';
import { useRouter } from 'next/router';

import DisbursementType, {
    getIconByID,
    getNameByID
} from '../../api/disbursement/disbursement-type';
import PayrollGroup from '../../api/payroll-group/payroll-group';
import Routes from '../../constants/routes';
import NumberTool from '../../libs/number-tool';

interface Props {
    group: PayrollGroup;
    types: Array<DisbursementType>;
}

const PayrollGroupsRow = (props: Props) => {
    const { group, types } = props;
    const router = useRouter();

    const onClick = () => {
        router.push(Routes.PAYROLL_GROUP + group.id);
    };

    return (
        <TableRow
            key={props.group.id}
            sx={{
                '&:last-child td, &:last-child th': {
                    border: 0
                }
            }}
            hover={true}
            onClick={onClick}
        >
            <TableCell>{group?.name}</TableCell>

            <TableCell align="center">{group?.numberOfMembers}</TableCell>

            <TableCell align="center">
                <Box
                    component="img"
                    sx={{
                        height: 20,
                        width: 20,
                        marginRight: '10px'
                    }}
                    alt="Icon"
                    src={getIconByID(types, group.disbursementType)}
                />

                {getNameByID(types, group.disbursementType)}
            </TableCell>

            <TableCell align="center">
                {group?.payoutSchedules && group.payoutSchedules.join(', ')}
            </TableCell>

            <TableCell align="center">{group.memberShare}%</TableCell>

            <TableCell align="center">
                {NumberTool.format(group.minimumPayoutAmount, group.currency, 2)} {group.currency}
            </TableCell>
        </TableRow>
    );
};

export default PayrollGroupsRow;
